<template>
  <section>
    <header class="header-area">
      <div class="main-header">
        <div class="container">
          <div class="row">
            <div class="col-lg-12" style="width: 100%;">
              <div
                class="main-header-item d-flex justify-content-between align-items-center"
              >
                <div class="main-header-menus  d-flex">
                  <div class="logo" style="height: 10px">
                    <a href="/"
                      ><img
                        style="height: 70px"
                        src="/assets/images/logo.png"
                        alt=""
                    /></a>
                  </div>

                  <div class="header-menu d-none d-lg-block">
                    <ul>
                      <li>
                        <a class="active" @click="$router.push('/')">首页</a>
                      </li>
                      <li>
                        <a href="#" @click="$router.push('search')"
                          >信息智能处理</a
                        >
                        <ul v-if="username" class="sub-menu">
                          <li>
                            <nuxt-link to="/search">信息处理</nuxt-link>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href="#" @click="$router.push('single-service')"
                          >智能处理样理展示</a
                        >
                        <ul v-if="username" class="sub-menu">
                          <li>
                            <nuxt-link to="/single-service">样例展示</nuxt-link>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href="#" @click="$router.push('authors')"
                          >经典作者介紹</a
                        >
                        <ul v-if="username" class="sub-menu">
                          <li><nuxt-link to="/authors">作者介绍</nuxt-link></li>
                          <li>
                            <nuxt-link to="/single-author">作者详情</nuxt-link>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href="#" @click="$router.push('hist')"
                          >查看历史记录</a
                        >
                        <ul v-if="username" class="sub-menu">
                          <li><nuxt-link to="/hist">历史记录</nuxt-link></li>
                        </ul>
                      </li>
                      <li>
                        <a v-if="!username" @click="$router.push('login')"
                          >去登陆</a
                        >
                        <span v-else>{{ username }}</span>
                      </li>
                      <li>
                        <a v-if="username" @click="Esc()">退出</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <div class="container" style="margin: 90px auto 0 auto">
      <div class="row justify-content-center my-input">
        <div style="margin: 20px 50px;"></div>
        <el-col :span="19">
          <el-form :model="text_From">
            <el-form-item>
              <el-input
                placeholder="Please input"
                v-model="originText"
                type="textarea"
                :rows="15"
                maxlength="50"
              >
              </el-input>
              <label class="button" style="margin: 10px auto 0 auto">
                <i
                  class="icon_word"
                  title="上传word文件"
                  style="bottom: 5px;left: 5px;"
                >
                  <input
                    class="icon_int"
                    accept=".docx"
                    type="file"
                    style=" overflow: hidden; text-overflow:
                    ellipsis;bottom: 5px;left: 5px; width: 30px;height: 30px;"
                    @change="showTxt($event)"
                    name="file"
                  />
                </i>
              </label>

              <label class="button">
                <i
                  class="icon_txt"
                  title="上传txt文件"
                  style="bottom: 5px;left: 45px;"
                >
                  <input
                    accept=".txt"
                    class="icon_int"
                    style=" bottom: 5px;left: 15px; width: 30px;height: 30px;"
                    type="file"
                    name="file"
                    @change="showTxt($event)"
                  />
                </i>
              </label>

              <label class="button" style="margin: 45px auto 0 auto">
                <i
                  class="icon_search"
                  title="搜索"
                  style="bottom: 5px;left: 850px;"
                  @click="get_sentences()"
                >
                </i>
              </label>
            </el-form-item>
          </el-form>
        </el-col>
        <el-row :gutter="29">
          <el-col :span="40"> </el-col>
          <el-col :span="12"> </el-col>
        </el-row>
      </div>
    </div>
    <div class="container" style="width: 80%;margin: 90px auto 0 auto">
      <div
        style="border-radius: 5px;border: 1px solid rgba(0,0,0,0.5);margin-bottom: 20px"
        v-for="(item, i) in originTextList"
        :key="i"
        v-if="item"
      >
        <div style="padding: 10px;cursor: pointer">
          <div>{{ item.text }}</div>
          <div v-if="!item.flag" style="margin-top: 20px">
            <el-button
              :loading="item.loading"
              @click="search_text(item, i), $set(item, 'flag', true)"
            >
              生成
            </el-button>
          </div>
        </div>
        <hr />
        <h4 style="margin: 20px">Ner:</h4>
        <div style="padding: 10px;margin: 20px">
          <div v-if="item.isEdit">
            <el-input v-model="item.consoleText" type="textarea" />
            <el-button
              v-if="item.consoleText"
              :loading="item.loading3"
              @click="$set(item, 'isEdit', false), change_text_1(item, i)"
            >
              编辑完成
            </el-button>
          </div>
          <div v-if="!item.consoleText">暂无数据</div>
          <div v-if="!item.isEdit">
            {{ item.consoleText }}
            <el-button
              v-if="item.consoleText"
              @click="$set(item, 'isEdit', true)"
            >
              编辑
            </el-button>
          </div>
        </div>
        <h4 style="margin: 20px">Re:</h4>
        <div style="padding: 10px;margin: 20px">
          <div v-if="item.isEdit2">
            <el-input v-model="item.consoleText2" type="textarea" />
            <el-button
              v-if="item.consoleText"
              :loading="item.loading2"
              @click="$set(item, 'isEdit2', false), change_text_2(item, i)"
            >
              编辑完成
            </el-button>
          </div>
          <div v-if="!item.consoleText2">
            暂无数据
          </div>
          <div v-if="!item.isEdit2">
            {{ item.consoleText2 }}
            <el-button
              v-if="item.consoleText"
              @click="$set(item, 'isEdit2', true)"
            >
              编辑
            </el-button>
          </div>
        </div>
        <h6 style="margin: 10px">您对此次抽取的满意程度:</h6>
        <div style="padding: 10px;margin: 20px;">
          <el-rate
            v-model="item.value"
            v-bind:disabled="item.saveScore"
            allow-half
            show-score
          >
          </el-rate>
          <el-button
            v-if="(item.value != 0) & (item.saveScore == false) & item.flag"
            @click="saveScore(item, i), $set(item, 'saveScore', true)"
          >
            保存
          </el-button>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { eventBus } from "@/plugins/event-bus";
export default {
  data() {
    return {
      loading: false,
      originText: "",
      originTextList: [],
      baseURL: "http://127.0.0.1:8000/",
      inputValue: "要复制的文本",
      text_From: {
        text: ""
      },
      file: null,
      username: null,
      password: null,
      isDisabled: false
    };
  },
  mounted() {
    /*for (let i = 0; i < this.originTextList.length; i++) {
      this.search_text(this.originTextList[i]);
    }*/
    let userName = JSON.parse(localStorage.getItem("user"));
    if (userName) {
      //userName.username==user.username  对应登录界面设置的key里面的value对应的数组值
      this.username = userName.username;
      this.password = userName.password;
      console.log("this.username:" + this.username);
      // console.log("this.password:" + this.password)
    }
  },
  created() {},
  methods: {
    Esc() {
      this.username = "";
      console.log("登出");
      localStorage.clear();

      this.$router.push("/");
    },
    //对用户输入的处理
    search_text(item) {
      const that = this;
      this.$set(item, "loading", true);
      this.$axios
        .post(this.baseURL + "search_text_1/", {
          text: item.text, //数据框的值传给后端
          username: that.username
        })
        .then(res => {
          that.$set(item, "loading", false);
          if (res.data.code === 1) {
            that.$set(item, "consoleText", res.data.text);
            that.$set(item, "consoleText2", res.data.text2);
            that.$set(item, "sentences_id", res.data.id);
            console.log(item.sentences_id);
          } else {
            this.$message.error("后台数据搜索异常");
          }
        })
        .catch(err => {
          that.$set(item, "loading", false);
          console.log(err);
        });
    },
    change_text_1(item) {
      var that = this;
      this.$set(item, "loading3", true);
      this.$axios
        .post(this.baseURL + "Edit_Ner/", {
          text_id: item.fileNewName,
          text: item.consoleText, //
          id: item.sentences_id
        })
        .then(res => {
          that.$set(item, "loading3", false);
          if (res.data.code === 1) {
            console.log("NER编辑成功啦！");
            console.log(res.data.hists);
          } else {
            this.$message.error("后台数据修改异常" + res.data.msg);
          }
        })
        .catch(err => {
          that.$set(item, "loading3", false);
          console.log(err);
        });
    },
    change_text_2(item) {
      var that = this;
      this.$set(item, "loading2", true);
      this.$axios
        .post(this.baseURL + "Edit_Re/", {
          text_id: item.fileNewName,
          text: item.consoleText2, //
          id: item.sentences_id
        })
        .then(res => {
          this.$set(item, "loading2", false);
          if (res.data.code === 1) {
            console.log("RE编辑成功啦！");
            console.log(res.data.hists);
          } else {
            this.$message.error("后台数据修改异常" + res.data.msg);
          }
        })
        .catch(err => {
          this.$set(item, "loading2", false);
          console.log(err);
        });
    },
    loadPDF() {
      pdfjsLib.getDocument("file.pdf").promise.then(pdf => {
        pdf.getPage(1).then(page => {
          page.getTextContent().then(textContent => {
            let text = "";
            for (let i = 0; i < textContent.items.length; i++) {
              const item = textContent.items[i];
              text += item.str;
            }
            this.$refs.i.innerHTML = text;
          });
        });
      });
    },
    //前端对输入框中的数据进行分段操作
    get_sentences() {
      this.originTextList = this.originText
        .split("。")
        .map(p => {
          if (p.trim() !== "") {
            //trim在不改变字符串本身的情况下，遍历该字符串，返回一个新的字符，截取第一个非空字符和最后非空字符的位置
            return {
              text: p,
              consoleText: "",
              consoleText2: "",
              loading: false,
              loading2: false,
              loading3: false,
              isEdit: false,
              isEdit2: false,
              flag: false,
              sentences_id: "",
              value: null,
              saveScore: false
            };
          } else {
            return null;
          }
        })
        .filter(p => p !== null); //当p不为null时 生成新的对象
    },
    //前端获取文本中的文字
    showTxt(input) {
      //支持chrome IE10
      if (window.FileReader) {
        var reader = new FileReader();
        var that = this;
        var file = input.target.files[0];
        // File size is available and valid
        // Process the file here
        reader.onload = event => {
          //显示文件
          that.originText = event.target.result;
          this.$axios
            .post(that.baseURL + "upload/", {
              file: that.originText,
              filename: file.name,
              filesize: parseFloat(file.size).toFixed(2),
              filetype: file.type
            })
            .then(res => {
              if (res.data.code === 1) {
                console.log(file.size + "++"),
                  console.log("成功" + res.data.files);
                that.fileNewName = res.data.files;
              } else {
                console.log(file.size + "++"),
                  that.$message.error("文件信息存储失败!:" + res.data.message);
              }
            })
            .catch(err => {
              that.$message.error("文件信息存储失败:" + err);
            });
        };
        console.info(file);
        console.info(file.size); //输出到文件的信息
        console.info(reader); //输出文件的文本内容
        reader.readAsText(file); //将文件转化成文本的格式
      } else {
        alert("FileReader Not supported by your browser!");
      }
    },

    saveScore(item) {
      const that = this;
      this.$axios
        .post(this.baseURL + "get_score/", {
          score: item.value,
          id: item.sentences_id
        })
        .then(res => {
          if (res.data.code === 1) {
            console.log("评分完成！" + res.data.hists);
          } else {
            this.$message.error("后台数据修改异常" + res.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  head() {
    return {
      title: "NLP | 信息智能处理"
    };
  }
};
</script>

<style scoped>
.label {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-image: url("imags/word.png");
}

.icon_int {
  visibility: hidden;
}

.icon_word {
  position: absolute;
  width: 30px;
  height: 30px;
  background-image: url("imags/word.png");
  background-size: cover;
}

.icon_txt {
  position: absolute;
  width: 30px;
  height: 30px;
  background-image: url("imags/txt.png");
  background-size: cover;
}

.icon_pdf {
  position: absolute;
  width: 30px;
  height: 30px;
  background-image: url("imags/pdf.png");
  background-size: cover;
}

.icon_paste {
  position: absolute;
  width: 30px;
  height: 30px;
  background-image: url("imags/paste.png");
  background-size: cover;
}
.icon_search {
  position: absolute;
  width: 80px;
  height: 37px;
  background-image: url("imags/search.png");
  background-size: cover;
}
.el-button.custom_1 {
  background-color: #192437;
  border-color: #192437;
  color: #f9f9f9; /* 文字颜色可以自定义 */
  bottom: 5px;
  left: 885px;
}
</style>
